<template>
  <Layout :showHome="true" title="任务列表">
   <van-tabs v-model="active">

<div class="renw">
 <van-tab title="全部">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item.date" >
        <div class="top" :title="item.id">
          <span class="coding">{{item.id}}</span>
          <span class="title">{{item.title}}
          
          </span><van-tag plain type="primary" v-if="item.assigned== '指派'">{{item.assigned}}</van-tag>
        </div>
        <div class="middle">
          <span class="money">{{item.price}}</span>
          <button @click="$router.push('/deliverables')">上传交付物</button>
        </div>
        <div class="bottom">
          <span class="address">
            <van-icon name="location" color=#a8afea />
           {{item.address}}</span>
          <span class="date">{{item.time}}</span>
        </div>
        <!-- 三角形的状态 -->
        <div class="triangle" v-if="item.status =='0'"><p>进行中</p></div>
        <div class="triangle—a" v-else-if="item.status =='1'"><p>已报名</p></div>
        <div class="triangle-c" v-else-if="item.status =='2'"><p>已完成</p></div>
        <div class="triangle-b" v-else><p>已关闭</p></div>
    </van-cell>
  </van-list>
</van-pull-refresh>
  </van-tab>
</div>

  <van-tab title="进行中">
    <ul>
      <li   v-for="it in conduct" :key="it.id" >
        <div class="top">
          <span class="coding">{{it.id}}</span>
          <span class="title">{{it.title}}
          
          </span><van-tag plain type="primary" v-if="it.assigned== '指派'">{{it.assigned}}</van-tag>
        </div>
        <div class="middle">
          <span class="money">{{it.price}}</span>
          <button @click="$router.push('/deliverables')" v-if="it.user=='0'" style="color:#8ad59c;boder:#8ad59c">上传交付物</button>
          <button @click="$router.push('/deliverables')"  v-else>修改交付物</button>
        </div>
        <div class="bottom">
          <span class="address">
            <van-icon name="location" color=#a8afea />
           {{it.address}}</span>
          <span class="date">{{it.time}}</span>
        </div>
        <!-- 三角形的状态 -->
       <div class="triangle" ><p>进行中</p></div>
      </li>
      <li>没有更多了(●'◡'●)</li>
    </ul>
  </van-tab>
  <van-tab title="已完成">
    <ul>
      <li   v-for="it in complete" :key="it.id" >
        <div class="top">
          <span class="coding">{{it.id}}</span>
          <span class="title">{{it.title}}
          
          </span><van-tag plain type="primary" v-if="it.assigned== '指派'">{{it.assigned}}</van-tag>
        </div>
        <div class="middle">
          <span class="money">{{it.price}}</span>
          <button @click="$router.push('/deliverables')">查看</button>
        </div>
        <div class="bottom">
          <span class="address">
            <van-icon name="location" color=#a8afea />
           {{it.address}}</span>
          <span class="date">{{it.time}}</span>
        </div>
        <!-- 三角形的状态 -->
       <div class="triangle-c" ><p>已完成</p></div>
      </li>
      <li>没有更多了(ง •_•)ง</li>
    </ul>
  </van-tab>
  <van-tab title="已关闭">
<ul>
      <li   v-for="it in close" :key="it.id" >
        <div class="top">
          <span class="coding">{{it.id}}</span>
          <span class="title">{{it.title}}
          
          </span><van-tag plain type="primary" v-if="it.assigned== '指派'">{{it.assigned}}</van-tag>
        </div>
        <div class="middle">
          <span class="money">{{it.price}}</span>
          <button disabled="false">查看</button>
        </div>
        <div class="bottom">
          <span class="address">
            <van-icon name="location" color=#a8afea />
           {{it.address}}</span>
          <span class="date">{{it.time}}</span>
        </div>
        <!-- 三角形的状态 -->
           <div class="triangle-b"><p>已关闭</p></div>
      </li>
      <li>没有更多了(●ˇ∀ˇ●)</li>
    </ul>

  </van-tab>
</van-tabs>
   
  </Layout>
</template>

<script>
import { hallListApi } from '@/apis/hallApi'
export default {
  data() {
    return {
               active: 0,
      // 页面进入的时候，一定要去加载第一页
                
            value: '',
            list:[],
            loading:false,
            finished:false,
            refreshing:false,
            conduct:[],
            complete:[],
            close:[]
    }
  },

  created(){
   this.getList()
   
  },
   methods: {
       async getList() {
      // 这个接口只会返回当前页的数据，为了数据传输量小
      let result = await hallListApi({})
      
        this.all = result
        this.list =result.slice(0,3)
        console.log(this.list);
        this.all.find(it => {
         if(it.status == 1){
            this.conduct.push(it)
        }
        else if(it.status == 2){
           this.complete.push(it)
        }else{
          this.close.push(it)
        }
        });
        // if(result.data.status==3){
        //    this.all= ture
        // }
      
    },

 onLoad() {
      if (this.refreshing) {
          this.list = [];
        this.refreshing = false;
        }
  hallListApi().then(res=>{
  // 如果status状态不是0，则不会出现在大厅中
     let a = []
      let j =0
   for(let i in res){
    if(res[i].status !== 0){
      a[j++] = res[i]
    }
    // console.log(a);
   }
       for (let i = 0; i < 6; i++) {
          this.list.push(a[i]);
        }
      })
        
        this.loading = false;

    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },

}
</script>

<style lang="less" scoped>
@import '@/style/common.less';



.more{
    display: block;
    width: 100%;
    height: 80px;
    text-align: center;
  }
  .renw{
   .triangle{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #8ad59c;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -77px!important;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
     .triangle—a{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #8ad59c;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -77px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
  .triangle-b{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #c4c4c4;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -77px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
 }
.triangle-c{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #a8caf6;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -77px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
  }
  .renw .van-cell {
    margin: auto;
    margin-bottom: 15px;
    width: 320px;
    padding: 0;
    background: 247, 248, 250;
    box-shadow: 2px 2px 3px 1px rgba(72, 69, 69, .1);
    .more{
    display: block;
    width: 100%;
    height: 80px;
    text-align: center;
  }
    .top {
      display: flex;
    }
      .coding {
        // display: inline-block;
        margin-right: 10px;
      }

      .title {
        font-size: 0.8rem;
        font-weight: 600;
        // display: inline;
        width: 180px;
        // 多行超出隐藏
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 1; //行数
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    

    .middle {
      padding: 10px 0px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
      .money {
        color: @a1;
        font-size:1rem;
      }

      button {
        padding: 2px;
        border: none;
        width: 80px;
        background: @a1;
        color: #fff;
        font-size: 0.6rem;
        border-radius: 15px;
      }
    

    .bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 10px;
      border-top: solid 1px #e3e4e6;
    }
      .address {
        font-size: 0.7rem;
        font-weight: 400;
        color: @c3 ;
      }

      .date {
        font-size: 0.7rem;
        font-weight: 400;
        color: @c4 ;
      }
 .triangle{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px @a1;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -66px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
 

  }
    .top {
      display: flex;
    }
      .coding {
        // display: inline-block;
        margin-right: 10px;
      }

      .title {
        font-size: 0.8rem;
        font-weight: 600;
        // display: inline;
        width: 180px;
        // 多行超出隐藏
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 1; //行数
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    

    .middle {
      padding: 10px 0px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      margin-top:15px;
    }
      .money {
        color: @a1;
        font-size:1rem;
      }

      button {
       padding: 5px;
       border: none;
       width: 100px;
       background: #fff;
       color: @a1;
       font-size: 0.6rem;
       font-weight: 500;
       border: solid 1px @a1;
       border-radius: 15px;
      }
    

    .bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 10px;
      border-top: solid 1px #e3e4e6;
    }
      .address {
        font-size: 0.7rem;
        font-weight: 400;
        color: @c3 ;
      }

      .date {
        font-size: 0.7rem;
        font-weight: 400;
        color: @c4 ;
      }

ul {
  position: relative;
  background: #fefefe;
  padding: 15px;
  >li:nth-last-child(1){
    margin-bottom: 100px;
  }
  >li {
    position: relative;
    margin: auto;
    margin-bottom: 15px;
    width: 300px;
    background: 247, 248, 250;
    padding: 10px;
 box-shadow:2px 2px 3px 1px  rgba(72, 69, 69, .1);
 >.triangle{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px @a1;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -66px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
  >.triangle—a{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #8ad59c;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -66px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
  >.triangle-b{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #c4c4c4;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -66px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
 }
>.triangle-c{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-top: solid 50px #a8caf6;
  border-left: solid 70px transparent;
  >p{
    position: absolute;
    top: -66px;
    right: 17px;
    transform: rotate(307deg);
    font-size: 0.5rem;
    color: #fff;
  }
  
 }
    >.top {
      display: flex;
      >.coding {
        // display: inline-block;
        margin-right: 10px;
        font-size: 0.8rem;
        font-weight: 400;
      }
      >.title {
        // display: inline;
        font-size: 0.8rem;
        font-weight: 600;
        width: 180px;
        // 多行超出隐藏
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 1; //行数
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
    >.middle{
      padding: 10px 0px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      >.money{
       color: @a1,
      }
      >button{
        padding: 5px;
       border: none;
       width: 100px;
       background: #fff;
       color: @a1;
       font-size: 0.6rem;
       font-weight: 500;
       border: solid 1px @a1;
       border-radius: 15px;
      }
    }
    >.bottom{
       display: flex;
      justify-content: space-between;
      padding-top: 10px;
      border-top: solid 1px #e3e4e6;
      >.address{
        font-size: 0.7rem;
        font-weight: 400;
        color:@c3 ;
      }
      >.date{
        font-size: 0.7rem;
        font-weight: 400;
        color:@c4 ;
      }
    }
  }

}
</style>